<template>
  <view class="order">
    <view class="main-swiper-full">
      <view class="swape-wrap">
        <swiper
          class="swiper-tall"
          :autoplay="false"
          :current="currentIndex"
          previous-margin="0rpx"
          next-margin="0rpx"
          @change="swiperChange"
        >
          <swiper-item v-for="(_, i) in 3" :key="i">
            <image
              mode="scaleToFill"
              style="width: 200px; height: 200px"
              class="slide-image"
              :class="currentIndex === i ? 'active' : ''"
              src="/src/static/images/1621589194423.png"
            ></image>
          </swiper-item>
        </swiper>
        <!-- <image class="p1-image"  src="/src/static/images/suipian4.png" mode="widthFix" />
        
        <image class="p3-image" src="/src/static/images/suipian3.png" mode="widthFix" /> -->
      </view>
      <view class="redeemed-box"> 已获得<br />{{ getGold(redeemedPayload.gold) }} </view>

      <image src="/src/static/images/icon_share.png" class="icon-share" @click="share" />
      <view class="buttons-container">
        <view @click="lotteryDraw" class="block bottom-btn mt-md mb-md">
          <image mode="widthFix" style="width: 300px" src="/src/static/images/draw_btn.png" />
        </view>

        <view @click="share" class="block block-share bottom-btn mt-md mb-md" type="primary">
          <image mode="widthFix" style="width: 300px" src="/src/static/images/invite_friend.png" />
        </view>
      </view>
    </view>
    <view class="container">
      <view class="scroll-list" :style="{ animationDuration: infoList.length + 's' }">
        <view class="item" v-for="(item, index) in infoList" :key="index">
          <text>{{ item.iphone }}</text>
          <text>{{ item.create_time }}</text>
        </view>
      </view>
    </view>
  </view>

  <OrderPopUp ref="orderPopRef" :share="share"></OrderPopUp>

  <!-- <u-popup :show="show" mode="center" @close="show = false">
    <view>
      {{ coin }}
    </view>
  </u-popup> -->
  <u-modal
    :show="audioShow"
    title="提示"
    showCancelButton
    closeOnClickOverlay
    @close="audioShow = false"
    @cancel="audioShow = false"
    @confirm="onConfirm"
  >
    <text>是否打开音乐</text>
  </u-modal>

  <u-popup  :show="weixinPopShow" :mask-click="true" mode="center" class="xytk"  background-color="rgba(0,0,0,0)" >
    <view class="weixin-koulin">
      <view class="image-wrap">
        <image class="ff" src="/static/images/ff.png" ></image>
      </view>
      <view class="tle1">分享口令已经复制</view>
      <view class="tle2">去微信粘贴给
        <text>新用户</text>
        可领大额度现金</view>
      <view>
         <button class="button" @click="clickGoWeixin">
              <u-icon name="weixin-fill" class="" size="20" color="#fff" ></u-icon>
              <text>去微信粘贴</text>
         </button>
      </view>
    </view>
  </u-popup>

</template>

<script lang="ts" setup>
  import { checkRedeemedShareCodeApi, shareCodeLotteryDrawApi } from '@/api/index';
  import { onShow, onHide } from '@dcloudio/uni-app';
  import { ref, unref } from 'vue';
  import { useUserStore } from '@/store/modules/user';

  import OrderPopUp from './order_pop.vue';
  const suipian = ref(0);
  const currentIndex = ref(0);

  const orderPopRef = ref<any>(null);
  const userStore = useUserStore();
  const show = ref(false);
  const redeemedPayload = ref<any>({gold:0});
  const coin = ref('');
  const infoList = ref<any>([]);
  const audioShow = ref(true);
  const audioContext = ref<any>(null);
  const currentAudio = ref<any>(null);

  const weixinPopShow = ref(false);
  // const weixinPopRef = ref<any>(null);


  function swiperChange(e) {
    console.log(e);
    currentIndex.value = e.detail.current;
  }

  const isPlay = ref(false);
  function getGold(num) {
    const shuijing = Math.floor(num / 10000);
    const shuijingsuipian = Math.floor((num % 10000) / 100);
    //合成
    suipian.value = shuijingsuipian;

    console.log('水晶', shuijingsuipian);

    const jinbi = num % 100;
    return `${shuijing ? shuijing + '水晶 ' : ''}${
      shuijingsuipian ? shuijingsuipian + '水晶碎片 ' : ''
    }${jinbi + '金币'}`;
  }
  function onConfirm() {
    clickPlay();
    audioShow.value = false;
  }
  function clickPlay() {
    isPlay.value = true;

    if (audioContext.value) {
      unref(audioContext).play();
    } else {
      audioContext.value = uni.createInnerAudioContext();
      currentAudio.value = unref(audioContext).src = userStore.getConfig.share_music_url;
      unref(audioContext).play();
    }
  }

  function clickPause() {
    isPlay.value = false;

    if (unref(audioContext)) {
      unref(audioContext).pause();
    }
  }

  onHide(() => {
    clickPause();
  });

  function getRedeemed() {
    checkRedeemedShareCodeApi()
      .then((res) => {
        if (res.code == -1) {
          uni.showToast({
            title: res.msg,
            icon: 'none',
          });
          return;
        }
        redeemedPayload.value = res.data;
        if (!res.list) return;
        infoList.value = res.list.map((item) => ({
          iphone: item.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'),
          create_time: dateStr(Date.parse(item.create_time)), // 假设 expire_time 是一个以秒为单位的时间戳
        }));
      })
      .catch((err) => {
        console.log(err);
        uni.showToast({
          title: err,
          icon: 'none',
        });
      });
  }
  function dateStr(date) {
    // 获取当前时间戳
    var now = new Date().getTime();

    // 计算时间差，单位为秒
    var diff = parseInt((now - date) / 1000);

    // 存储转换值
    var s;
    if (diff < 60 * 10) {
      return '刚刚助力成功';
    } else if (diff < 60 * 60) {
      s = Math.floor(diff / 60);
      return s + '分钟前助力成功';
    } else if (diff < 60 * 60 * 24) {
      s = Math.floor(diff / 60 / 60);
      return s + '小时前助力成功';
    } else if (diff < 60 * 60 * 24 * 3) {
      s = Math.floor(diff / 60 / 60 / 24);
      return s + '天前助力成功';
    } else {
      var dateObj = new Date(date);
      return (
        dateObj.getFullYear() +
        '/' +
        (dateObj.getMonth() + 1) +
        '/' +
        dateObj.getDate() +
        ' 助力成功'
      );
    }
  }
  function copyTextToClipboard(text) {
    const textarea = document.createElement('textarea');
    textarea.value = text;
    document.body.appendChild(textarea);
    textarea.select();
    document.execCommand('copy');
    document.body.removeChild(textarea);
  }

  function clickGoWeixin(){
    let domain = "";
    if(redeemedPayload.value){
      domain = window.location.href.replace('submit-order', 'share-order') + `?` +
      redeemedPayload.value.share;
    }else{
      domain =window.location.href.replace('submit-order', 'share-order')
    }
    copyTextToClipboard(domain);
    weixinPopShow.value = false;
    window.location.href = "weixin://"
    
  }


  function share() {
    // console.log('share');
  
    // uni.showToast({
    //   title: '复制成功',
    //   icon: 'success',
    // });

   

    try {
      orderPopRef.value.closePop();
    } catch (error) {

    }

    weixinPopShow.value = true;
    
  }

  function lotteryDraw() {
    const data = { party: redeemedPayload.value.party };
    shareCodeLotteryDrawApi(data)
      .then((res) => {
        show.value = true;
        coin.value = getGold(res.coin);
        orderPopRef.value.showMidPop(suipian.value);
        getRedeemed();
      })
      .catch((err) => {
        // uni.showToast({
        //   title: err,
        //   icon: 'none',
        // });
      });
  }

  onShow(() => {
    getRedeemed();
  });
</script>

<style lang="less">
  .order {
    height: 100%;
    position: relative;
    background-image: url(/src/static/images/share_bg.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #f1633f;
    .redeemed-box {
      padding: 10rpx 50rpx;
      text-align: center;
      bottom: 0;
      color: #ffe5b0;
      font-size: 30rpx;
      font-weight: bold;
    }

    .icon-share {
      width: 38px;
      height: 38px;
      position: absolute;
      right: 10px;
      top: 10px;
    }
    .container {
      margin-top: 20px;
      overflow: hidden;
      height: 70px;
    }

    .scroll-list {
      animation: scroll linear infinite;
      display: flex;
      flex-direction: column;
    }

    .item {
      color: #fff;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }

    @keyframes scroll {
      0% {
        transform: translateY(0);
      }

      100% {
        transform: translateY(-100%);
      }
    }
    .main-swiper-full {
      width: 100%;
      margin: auto;
      text-align: center;
      padding-top: 55%;

      .swiper-tall {
        height: 200px;
      }
      .swape-wrap {
        text-align: center;
        // .p1-image{
        //   margin-left: -70%;
        //   width: 200%;
        //   transform: scale(0.8);
        // }
        // .p2-image{
        //   width: 200%;
        //   margin-left: -50%;
        // }
        // .p3-image{
        //   width: 200%;
        //   margin-left: -30%;
        //   transform: scale(0.8);
        // }

       
        
      }
      .buttons-container {
        position: absolute;
        left: 50%;
        margin-left: -150px;
        bottom: 5%;
      }

      .block {
        width: 300px;
      }
      .block-share {
        margin-top: 0px;
      }
    }
  }
  .xytk{
    border-radius: 20px;
    :deep(.u-popup__content) {
      // margin: 0 12%;
      // padding: 0 20px 10px;
      border-radius: 6px;
    }
  }
  .weixin-koulin{
    padding: 30px 20px;
    border-radius: 20px;
    background-color: #fafafa;
    .image-wrap{
       width: 100%;
       margin: 0 auto;
       text-align: center;
    }
    .ff{
      width: 120px;
      height: 120px;
      margin: 20px auto;
    }
    .tle1{
      color: #999;
      text-align: center;
      font-size: 16px;
      margin-bottom: 10px;
    }
    .tle2{
      color: #999;
      text-align: center;
      font-size: 16px;
      margin-bottom: 10px;
      text{
        color: #f1633f;
        font-size: 16px;
      }
    }

    .button{
      background: linear-gradient(270deg, #ff8361, #ff5525);
      height: 41px;
      line-height: 41px;
      color: #fff;
      display: flex;
      text-align: center;
      justify-content: center;
      text{
        color: #fff;
      }
    }
  }
</style>
